<template>
  <div class="app-container">
    <!-- 主内容区域 -->
    <div id="myChart"></div>
  </div>
</template>
<script>

import axios from "axios";

export default {
  data() {
    return {
      name: "",
      planePath: "rect",
    };
  },
  created() {},
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 绘制图表
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      var myChart = this.$echarts.init(document.getElementById("myChart"));

      axios.get(ROOT_PATH + "/data/asset/geo/Beef_cuts_France.svg", {})
      .then(response => {
          //console.log(response.data)
          this.callback(myChart,response.data)
      })
    },
    // 用户在methods中可以添加用户自定义的方法
    handleCommand(command) {
      if (command == "a") {
        this.$router.push("/login"); // 当点击了退出按钮，调用退出方法
      }
      if (command == "b") {
        // 当点击了设置按钮，调用设置方法，目前只是测试关于热门商品显示和隐藏的效果
        this.has_hot_goods = !this.has_hot_goods;
      }
    },
    callback (myChart,svg) {
        this.$echarts.registerMap("Beef_cuts_France", { svg: svg });

        var option = {
          tooltip: {},
          visualMap: {
            left: "center",
            bottom: "10%",
            min: 5,
            max: 100,
            orient: "horizontal",
            text: [null, "Price"],
            realtime: true,
            calculable: true,
            inRange: {
              color: ["#dbac00", "#db6e00", "#cf0000"],
            },
          },
          series: [
            {
              name: "French Beef Cuts",
              type: "map",
              map: "Beef_cuts_France",
              roam: true,
              emphasis: {
                label: {
                  show: false,
                },
              },
              selectedMode: false,
              data: [
                { name: "Queue", value: 15 },
                { name: "Langue", value: 35 },
                { name: "Plat de joue", value: 15 },
                { name: "Gros bout de poitrine", value: 25 },
                { name: "Jumeau à pot-au-feu", value: 45 },
                { name: "Onglet", value: 85 },
                { name: "Plat de tranche", value: 25 },
                { name: "Araignée", value: 15 },
                { name: "Gîte à la noix", value: 55 },
                { name: "Bavette d'aloyau", value: 25 },
                { name: "Tende de tranche", value: 65 },
                { name: "Rond de gîte", value: 45 },
                { name: "Bavettede de flanchet", value: 85 },
                { name: "Flanchet", value: 35 },
                { name: "Hampe", value: 75 },
                { name: "Plat de côtes", value: 65 },
                { name: "Tendron Milieu de poitrine", value: 65 },
                { name: "Macreuse à pot-au-feu", value: 85 },
                { name: "Rumsteck", value: 75 },
                { name: "Faux-filet", value: 65 },
                { name: "Côtes Entrecôtes", value: 55 },
                { name: "Basses côtes", value: 45 },
                { name: "Collier", value: 85 },
                { name: "Jumeau à biftek", value: 15 },
                { name: "Paleron", value: 65 },
                { name: "Macreuse à bifteck", value: 45 },
                { name: "Gîte", value: 85 },
                { name: "Aiguillette baronne", value: 65 },
                { name: "Filet", value: 95 },
              ],
            },
          ],
        };
        option && myChart.setOption(option);
      }
  },
};
</script>
<style scoped>

#myChart{
    width: 600px;
    height:400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

</style>
